<template>
    <el-dialog v-model="dialogVisible" title="Tips" width="500">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="权限字符" prop="auth">
                <el-input v-model="ruleForm.auth" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-select v-model="ruleForm.state" placeholder="请选择状态">
                    <el-option label="正常" :value="true" />
                    <el-option label="停用" :value="false" />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="createtime">
                <el-date-picker v-model="ruleForm.createtime" type="date" placeholder="请选择日期" format="YYYY/MM/DD"
                    value-format="x" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
let dialogVisible = ref(false)
let title = ref('')
const showDialog = (row) => {
    if (row) {
        // 修改标题
        title.value = '修改'
        // 数据回填
        ruleForm.value = { ...row }
    } else {
        title.value = '添加'
        // 清空表单
        ruleForm.value = {
            name: '',
            auth: '',
            sort: '',
            state: '',
            createtime: ''
        }
    }
    dialogVisible.value = true
}
defineExpose({ showDialog })

const ruleFormRef = ref()
const ruleForm = ref({
    name: '',
    auth: '',
    sort: '',
    state: '',
    createtime: ''
})

const rules = ref({
    name: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ],
    auth: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ],
    sort: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ],
    state: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ],
    createtime: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ],
})

import { addTableAPI, updateTableAPI } from '@/api/table'
import { ElMessage } from 'element-plus'
const props = defineProps(['getTable'])
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            if (ruleForm.value.id) {
                await updateTableAPI(ruleForm.value.id, ruleForm.value)
                // ElMessage.success('修改成功')
            } else {
                await addTableAPI(ruleForm.value)
                // ElMessage.success('添加成功')
            }
            // 提示消息
            ElMessage.success(ruleForm.value.id ? '修改成功' : '添加成功')
            // 关闭对话框
            dialogVisible.value = false
            // 重新获取数据
            props.getTable()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style lang="scss" scoped></style>